<script setup>
import TopTitle from '../components/bar/TopTitle.vue'
import InfoCard from '../components/overView/InfoCard.vue'
import DataStatisticCard from '../components/overView/DataStatisticCard.vue'
import Comment from '../components/reply/Comment.vue'

import { onMounted, ref, getCurrentInstance } from 'vue'
import { cardBasicInfo } from '../utils/menu.js'
import request from '../api/index.js'
const proxy = getCurrentInstance()?.proxy
const titleFunction = [
]
const urlComment = ref({
  get: '/admin/comment//searchComment',
  change: '/admin/comment/updateCommentReadStatus'
 
})
const urlMessage = ref({
  get: '/admin/message/searchMessage',
  change: '/admin/message/updateMessageReadStatus'
})
const cardInfo = ref(cardBasicInfo)
onMounted(() => {
  request.get('/admin/overview/getTableCount').then(res =>{
    if (res.data.status === 'success') {
      for (let i in res.data.data.tableCounts) {
        cardInfo.value.forEach(item => {
          if (item.Ename === i && item.Ename!== 'file') {
            item.total = res.data.data.tableCounts[i]
          } else if (item.Ename === 'file') {
            item.total = res.data.data.fileTotalSize
          }
        })
      }
    } else {
      cardInfo.value = cardBasicInfo
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
})
</script>

<template>
  <div class="index-view">
    <yk-space dir="vertical" :size="24">
      <top-title title="总览" :titleFunction="titleFunction" />
      <yk-space wrap class="info-card">
        <info-card v-for="(item, index) in cardInfo" :key="index" :cardInfo="item" />
      </yk-space>
      <yk-space :size="24" justify="between" class="content">
        <yk-space dir="vertical" :size="24" class="data-statictis-card">
          <data-statistic-card type="line" title="访问量" />
          <data-statistic-card type="pie"  title="数据监测" />
        </yk-space>
        <div class="overview-comment"> 
          <Comment title="comment" :url="urlComment" />
        </div>
      </yk-space>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.index-view {
  padding: 32px 32px 32px 232px;
  width: 100%;
  background-color: @bg-color-m;

  .info-card {
  width: 100%;
  }

  .content {
    width:100%;
    height:640px;
    
  .overview-comment {
    width: 50%;
    height:100%;
  }

  .data-statictis-card {
    width: 50%;
  }
  }
  
}
</style>